// 3. JS逻辑：
const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']

sounds.forEach(sound => {
  const btn = document.createElement('button')
  btn.classList.add('btn')

  btn.innerText = sound

  btn.addEventListener('click', () => {
    stopSongs() // 再点一次, 停止上次的播放音效.
    document.getElementById(sound).play() // 第一次点击 audio标签 进行播放
  })

  // 3.2 通过给页面上的 (父)buttons 上添加对应每个 audio 的按钮盒子,
  // 然后在已经配置好的 css, 根据 btn类名 加上对应样式...
  document.getElementById('buttons').appendChild(btn)
})

function stopSongs() {
  sounds.forEach(sound => {
    const song = document.getElementById(sound)

    song.pause()
    song.currentTime = 0;
  })
}